<template>
	<view class="valuationReport">
		
		<!-- 基础信息 -->
		<view class="valuationReportInfomation commonBox">
			<view class="">
				<view class="valuationReportInfomationT">
					<image src="../../static/cljbxx.png" mode=""></image>
					<text>车辆基础信息</text>
				</view>
				<view class="infomationTitle">
					<view class="qqq" style="margin-top: 50rpx;">
						<text>品牌型号</text>{{ dataJson.seriesName || '--' }}
					</view>
					<view class="qqq">
						<text>款型</text>{{ dataJson.modelYear || '--' }}款 {{ dataJson.shortName || '--' }}
					</view>
					<view class="qqq">
						<text>新车指导价</text>
						<span style='color: #FF552E;' >{{ dataJson.guidePrice || '0' }}万</span>
					</view>
					<view class="carpictrue" v-if="seriesLogo">
						<image :src="picture" mode="aspectFit"></image>
					</view>
					<view class="carpictrue" v-else>
						<image src='../../static/zwtp1.jpg' mode="aspectFit"></image>
					</view>
				<!-- 	<view class="price _flex _justify_between">
						<view class="">
							{{ dataJson.modelYear || '--' }}款 {{ dataJson.shortName || '--' }}
						</view>
						<view class="">
							新车指导价：
							<text style="color: red;margin-left: 10rpx;">{{ dataJson.guidePrice || '0' }}万</text>
						</view>
					</view>
					<view>
						<view class="carpictrue" v-if="seriesLogo">
							<image :src="picture" mode="aspectFit"></image>
						</view>
						<view class="carpictrue" v-else>
							<image src='../../static/zwtp1.jpg' mode="aspectFit"></image>
						</view>
					</view> -->
				</view>
			<!-- 	<view>
					<image style="width: 100%;"  mode="widthFix" :src="https+dataJson.seriesLogo"></image>
				</view> -->
			</view>
			<view class="infomationContent">
				<view class="contentPart">
					<view class="information">所在城市</view>
					<view class="">{{dataJson.cityName || '--'}}</view>
				</view>
				<view class="contentPart">
					<view class="information">上牌日期</view>
					<view class="" v-if="dataJson.regDate">{{dataJson.regDate | changeDates(0,7) }}</view>
				</view>
				<view class="contentPart">
					<view class="information">行驶里程</view>
					<view class="">{{dataJson.mile || '0'}}万公里</view>
				</view>
				<view class="contentPart">
					<view class="information">电池类型</view>
					<view class="">{{dataJson.batteryType || '--'}}</view>
				</view>
			</view>
		</view>
		<!-- 价格分布图 -->
		<view class="commonBox">
			<view class="titletext">
				<view class="titlesqq">
					<image src="../../static/jgfbt.png" mode=""></image>
					<span>价格分布图</span>
				</view>
				<text class="danwei">单位：万元</text>
			</view>
			<view class="priceDistributionImg">
				<view class="priceDistributionImgTab">
					<u-tabs class="priceTab" :height='120' :list="priceImgList" :is-scroll="false" :current="active" @change="activeTapOne" :bar-width="150"
						active-color="#002B56;" font-size="28"></u-tabs>
				</view>
				<view class="">
					<view class="priceNumStyle">
						<view class="" v-for="(item,index) in priceNumList" :key="index">
							<view style="font-size: 32rpx;">{{item.num}}</view>
							<view class="priceArrow"></view>
						</view>
					</view>
					<view class="priceTitleStyle">
						<view class="" v-for="(item,index) in priceNumList" :key="index">
							<view style="border-right: 1px solid #FFFFFF;">{{item.name}}</view>
						</view>
					</view>
					<view class="priceBottomStyle">
						<view class="" v-for="(item,index) in priceNumBottomList" :key="index">
							<view>{{item}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="commonBox">
			<view class="titletext">
				<view class="titlesqq">
					<image src="../../static/jgyc.png" mode=""></image>
					<span>价格预测</span>
				</view>
				<text class="danwei">单位：万元</text>
			</view>
			<view>
				<view class="priceDistributionImgTab">
					<u-tabs class="priceTab" :height='120' :list="priceForecastList" :is-scroll="false" :current="active1" @change="activeTwoTap" :bar-width="220"
						active-color="#002B56;" font-size="28"></u-tabs>
				</view>
				<view style="text-align: center;">
					<zEacher :recentEstimate="recentEstimate"></zEacher>
				</view>
			</view>
		</view>
<!-- 		<view class="commonBox">
			<view class="titletext">
				同区域省份价格
				<text class="danwei">单位：万元</text>
			</view>
			<view>
				<view style="text-align: center;">
					<tEacher :sameAreaProvincePrice="sameAreaProvincePrice"></tEacher>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				https: getApp().globalData.picturePath,
				picture:'',
				dataJson: '',
				seriesLogo:'',
				active: 1,
				active1: 0,
				priceImgList: [{
						name: '车况优秀'
					},
					{
						name: '车况良好'
					},
					{
						name: '车况一般'
					}
				],
				priceForecastList: [{
						name: '近期价格分析'
					},
					{
						name: '未来两年价格'
					}
				],
				priceNumList: [{
						num: "0.00",
						name: '车商收购价'
					},
					{
						num: "0.00",
						name: '个人交易价'
					},
					{
						num: "0.00",
						name: '车商零售价'
					}
				],
				priceNumBottomList: ['0','0','0','0'],
				form: {
					name: '',
					price: '',
					priceLow: ''
				},
				recentEstimate:[],
				sameAreaProvincePrice:[],
			};
		},
		onLoad(options) {
			console.log(JSON.parse(decodeURIComponent(options.data)))
			this.dataJson = JSON.parse(decodeURIComponent(options.data));
			// console.log(this.dataJson)
			this.seriesLogo=this.dataJson.seriesLogo;
			// console.log(this.seriesLogo);
			this.picture = this.https+this.seriesLogo;
			// console.log(this.picture);
			// this.priceNumList[0].num = this.dataJson.valuationInfo.highDealerBuyPrice;//车况优秀：车商收购价
			// this.priceNumList[1].num = this.dataJson.valuationInfo.highPrice;//车况优秀：个人交易价
			// this.priceNumList[2].num = this.dataJson.valuationInfo.highDealerPrice ;//车况优秀：车商零售价
			// this.priceNumBottomList[0] = this.dataJson.valuationInfo.highMimDealerBuyPrice;//车况优秀：车商最低收购价
			// this.priceNumBottomList[1] = this.dataJson.valuationInfo.highMaxDealerBuyPrice;//车况优秀：车商最高收购价
			// this.priceNumBottomList[2] = this.dataJson.valuationInfo.highMaxPrice;//车况优秀：个人最高交易价
			// this.priceNumBottomList[3] = this.dataJson.valuationInfo.highMaxDealerPrice;//车况优秀：车商最高零售价
			this.priceNumList[0].num = this.dataJson.valuationInfo.goodDealerBuyPrice
			this.priceNumList[1].num = this.dataJson.valuationInfo.goodPrice
			this.priceNumList[2].num = this.dataJson.valuationInfo.goodDealerPrice
			this.priceNumBottomList[0] = this.dataJson.valuationInfo.goodMimDealerBuyPrice
			this.priceNumBottomList[1] = this.dataJson.valuationInfo.goodMaxDealerBuyPrice
			this.priceNumBottomList[2] = this.dataJson.valuationInfo.goodMaxPrice
			this.priceNumBottomList[3] = this.dataJson.valuationInfo.goodMaxDealerPrice
			
			// 近期价格
			this.recentEstimate = this.dataJson.valuationInfo.recentEstimate
			
			this.sameAreaProvincePrice = this.dataJson.valuationInfo.sameAreaProvincePrice
			
		// 	this.getPicture()
		},
	
		methods: {
			
			activeTwoTap(index){
				this.active1 = index
				if(index == 0){
					// 近期价格
					this.recentEstimate = this.dataJson.valuationInfo.recentEstimate
				}else{
					// 两年价格
					this.recentEstimate = this.dataJson.valuationInfo.twoYearEstimate
				}
			},
			activeTapOne(index){
				this.active = index
				if(index == 0){
					this.priceNumList[0].num = this.dataJson.valuationInfo.highDealerBuyPrice
					this.priceNumList[1].num = this.dataJson.valuationInfo.highPrice
					this.priceNumList[2].num = this.dataJson.valuationInfo.highDealerPrice
					this.priceNumBottomList[0] = this.dataJson.valuationInfo.highMimDealerBuyPrice
					this.priceNumBottomList[1] = this.dataJson.valuationInfo.highMaxDealerBuyPrice
					this.priceNumBottomList[2] = this.dataJson.valuationInfo.highMaxPrice
					this.priceNumBottomList[3] = this.dataJson.valuationInfo.highMaxDealerPrice
				}else if(index == 1){
					this.priceNumList[0].num = this.dataJson.valuationInfo.goodDealerBuyPrice
					this.priceNumList[1].num = this.dataJson.valuationInfo.goodPrice
					this.priceNumList[2].num = this.dataJson.valuationInfo.goodDealerPrice
					this.priceNumBottomList[0] = this.dataJson.valuationInfo.goodMimDealerBuyPrice
					this.priceNumBottomList[1] = this.dataJson.valuationInfo.goodMaxDealerBuyPrice
					this.priceNumBottomList[2] = this.dataJson.valuationInfo.goodMaxPrice
					this.priceNumBottomList[3] = this.dataJson.valuationInfo.goodMaxDealerPrice
				}else{
					this.priceNumList[0].num = this.dataJson.valuationInfo.lowDealerBuyPrice
					this.priceNumList[1].num = this.dataJson.valuationInfo.lowPrice
					this.priceNumList[2].num = this.dataJson.valuationInfo.lowDealerPrice
					this.priceNumBottomList[0] = this.dataJson.valuationInfo.lowMimDealerBuyPrice
					this.priceNumBottomList[1] = this.dataJson.valuationInfo.lowMaxDealerBuyPrice
					this.priceNumBottomList[2] = this.dataJson.valuationInfo.lowMaxPrice
					this.priceNumBottomList[3] = this.dataJson.valuationInfo.lowMaxDealerPrice
				}
			}
		}
	};
</script>
<style scoped lang="scss">
	.valuationReportInfomationT{
		display: flex;
		image{
			width: 38rpx;
			height: 38rpx;
		}
		text{
			font-family: PingFangSC-Medium;
			font-size: 30rpx;
			color: #2C2C2C;
			padding-left: 20rpx;
		}
	}
	.carpictrue {
		width: 100%;
		height: 562rpx;
	}
	.carpictrue image{
		width: 100%;
		height: 562rpx;
	}
	.valuationReport{
		// padding:0 32rpx;
	}
	.valuationReportInfomation {
		margin-top: 10rpx !important;
		padding: 30rpx;
		.infomationTitle {
			.price {
				color: #666;
			}
			text{
				font-family: PingFangSC-Medium;
				font-size: 30rpx;
				color: #2C2C2C;
				width: 170rpx;
				display: block;
			}
			.qqq{
				// height: 42rpx;
				line-height: 42rpx;
				margin-top: 25rpx;
				font-family: PingFangSC-Regular;
				font-size: 30rpx;
				color: #2C2C2C;
				display: flex;
			}
		}

		.infomationContent {
			display: flex;

			.contentPart {
				flex-grow: 1;
				// border-right: 1px solid #e6e6e6;
				text-align: center;
				font-family: PingFangSC-Medium;
				font-size: 28rpx;
				color: #2C2C2C;
				.information {
					color: #999;
					margin-bottom: 10rpx;
					font-size: 22rpx;
				}
			}

			.contentPart:last-child {
				border-right: none
			}
		}
	}

	.titletext {
		padding: 10px;
		font-weight: bold;
		font-size: 30rpx;
		color: #2C2C2C;
		    display: flex;
		    justify-content: space-between;
		span{
			display: block;
		}
		.titlesqq{
			display: flex;
		}
		image{
			width: 34rpx;
			height: 34rpx;
			margin-right: 20rpx;
		}
		.danwei{
			color:#999;
			float: right;
			font-size: 28rpx;
			font-weight:initial;
		}
	}

	.priceDistributionImgTab {
		border-bottom: 1px solid #ececec;
		
		.active {
			background-color: #fff;
			color: #333;
		}
	}

	.priceDistributionImg {

		.priceNumStyle,
		.priceTitleStyle,
		.priceBottomStyle {
			display: flex;
			text-align: center;

			>view {
				flex-grow: 1;
				padding: 10rpx 0;
			}
		}

		.priceNumStyle {
			>view {
				padding-bottom: 0;
			}

			margin-top: 20rpx;

			.priceArrow {
				display: inline-block;
				margin: auto;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-bottom: 4px solid #002A55;
				height: 0;
				width: 0;
			}
		}

		.priceTitleStyle {
			background-color: #002A55;
			border-style: solid;
			border-color: #fff;
			border-width: 0 10px;
			color: #fff;
			>view:last-child {
				>view {
					border: none !important
				}
			}
		}

		.priceBottomStyle {
			>view:first-child {
				text-align: left;
				margin-left: 4%;
			}

			>view:nth-child(2) {
				margin-right: 10%;
			}

			>view:last-child {
				text-align: right;
				margin-right: 4%;
			}

			padding-bottom: 30rpx;
		}
	}

	.bagColorWhite {
		background-color: #fff;
	}

	.highlightPart {
		flex-grow: 1;
	}

	.chengjiaoPart {
		.chengjiaoList {
			padding: 30rpx 20rpx;
			border-bottom: 1px solid #ccc;
		}

		.chengjiaoList:last-child {
			border: none;
		}
	}
	.commonBox{
		background-color: #fff;
		border-radius: 12rpx;
		margin-top: 20rpx;
	}
	
</style>